import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { HeroService } from '../hero.service';
import { switchMap, tap } from 'rxjs/operators';
import hero from 'src/app/configs/hero';
import { Observable } from 'rxjs';
import { Hero } from '../hero';

@Component({
  selector: 'app-hero-detail',
  templateUrl: './hero-detail.component.html',
  styles: [
  ],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HeroDetailComponent implements OnInit {
  hero$: Observable<Hero>;

  constructor(
    private route: ActivatedRoute,
    private heroServe: HeroService,
    private router: Router
  ) { }

  ngOnInit(): void {
    // this.route.paramMap.subscribe(param => {
    //   console.log('路由参数22--', param.get('id'));
    //   this.heroServe.getHero(param.get('id')).subscribe(hero => {
    //     console.log('路由对应的参数对象--', hero);
    //   })
    // })
    this.hero$ = this.route.paramMap.pipe(
      tap(params => {
        console.log(333, params)
      }),
      switchMap(params => {
        console.log(444, params);
        return this.heroServe.getHero(params.get('id'));
      })
    )
  }

  back (id: number) {
    this.router.navigate(['/heroes', { id }]);
  }
}
